<template>
	<view class="box">
		<view class="box-1" @click="showDim(!isDim)">
			<view class="box-1-badge">
				<u-badge type="error" :count="checkSize" :offset="[-15, -15]"></u-badge>
				<u-icon name="shopping-cart" :size="60"></u-icon>
			</view>
			
			<view class="box-1-sumPrice">
				{{ comSumPrice }}
			</view>
		</view>
		
		<button class="box-button" @click="toQRCode">
			立即付款
		</button>
	</view>
</template>

<script>
	import { mapState, mapGetters } from 'vuex'
	
	export default {
		name: 'shop-car',
		props: ['isDim'],
		computed: {
			...mapState('car', ['sumPrice', 'shopCar']),
			...mapState('user', ['userId']),
			...mapGetters('car', ['checkSize']),
			...mapGetters('user', ['isLogin']),
			comSumPrice() {
				return '￥' + this.sumPrice
			}
		},
		methods: {
			showDim(flag) {
				if (this.checkSize > 0) {
					this.$emit('doShowDim', flag)
				}
			},
			toQRCode() {
				// 没有选择
				if (this.checkSize <= 0) {
					return 
				}
			
				// 没有登录
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return 
				}
				
				// 已登录
				this.$myRequest({
					url: '/sysOrder?userId=' + this.userId + "&sumPrice=" + this.sumPrice,
					data: this.shopCar,
					method: 'POST'
				}).then(r => {			
					uni.navigateTo({
						url: '/pages/qrcode/qrcode?orderId=' + r.data.result
					})
				})
			}
		}
	}

</script>

<style>
	.box{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100rpx;
		background-color: #FFFFFF;
		z-index: 2;
	}
	
	.box-1{
		padding: 0 25rpx;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		width: calc(100% - 200rpx);
		height: 100%;
	}
	
	.box-1-badge{
		position: relative;
		padding: 10rpx 5rpx 5rpx;
		border: 2px solid;
		border-radius: 80px;
	}
	
	.box-1-sumPrice{
		color: #FF3703;
		font-size: 20px;
		margin-left: 30rpx;
	}
	
	.box-button{
		width: 200rpx;
		height: 100%;
		border-radius: 0;
		background-color: #ff3703;
		color: #FFFFFF;
		line-height: 50px;
		font-size: 16px;
		font-weight: 700;
	}
</style>
